import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

import * as Api from '@/api/shop'
import authority from '@/utils/authority'
import { redirectBack } from '@/utils/router'
import location from '@/utils/location'
import { toast } from '@/utils/feedBack'

import { isSwan } from '@/utils/validate'

import './index.scss'

export default class Index extends Component {
  config = {
    navigationBarTitleText: '选择城市'
  }

  state = {
    data: [],
    currentCity: '苏州',
    city: {},
    tips: ''
  }

  async componentWillMount() {
    this.fetchData()
    let { city = {}, currentAddress } = authority.get()
    this.setState({
      city
    })
    if (!currentAddress) {
      currentAddress = await location.get()
    }
    this.setState({
      currentCity: currentAddress.currentCity || '苏州'
    })
  }

  fetchData = async () => {
    const data = await Api.list()
    const { shop = [], city = {}, tips = '' } = data
    if (city.city) {
      city.city = city.city.replace('市', '')
    }
    this.setState({
      data: shop,
      currentCity: city.city,
      tips
    })
  }

  reGetLocation = async () => {
    try {
      const data = await location.get(true)
      this.setState({
        currentCity: data.currentCity
      })
      toast(`当前定位城市${data.currentCity}`)
    } catch (e) {
      toast('定位失败')
    }
  }

  select = item => {
    this.setState(
      {
        city: item
      },
      () => {
        authority.set({
          city: item
        })
        redirectBack()
      }
    )
  }

  render() {
    const { city, data = [], tips, currentCity = '' } = this.state
    return (
      <View className='choose-city'>
        <View className='container'>
          {!isSwan && (
            <View className='choose-header'>
              <View className='title'>当前定位</View>
              <View className='between-flex middle-flex'>
                <View className='city-tag center-flex'>
                  <Image
                    src={require('./images/address_icon_active.png')}
                    className='address-icon'
                  />
                  <View>{currentCity}</View>
                </View>
                {/* <View
            onClick={this.reGetLocation}
            className='get-pos center-flex'
          >
            <Image
              src={require('./images/choose_address_icon.png')}
              className='address-icon'
            />
            <View>重新定位</View>
          </View> */}
              </View>
            </View>
          )}
          <View className='city-list'>
            {data.map(item => (
              <View
                key={item.id}
                onClick={() => this.select(item)}
                className='city-item between-flex'
              >
                <View className='Image-box'>
                  <View className='Image-info center-flex column-flex'>
                    <Image
                      mode='aspectFill'
                      className='city-image'
                      src={item.city_image}
                    />
                  </View>
                </View>
                <View className='city-info'>
                  <View className='city-title'>{item.city}</View>
                  <View className='desc'>{item.address}</View>
                </View>

                {item.shop_id === city.shop_id ? (
                  <Image
                    src={require('./images/select_active.png')}
                    className='select-icon'
                  />
                ) : (
                  <Image
                    src={require('./images/select_icon.png')}
                    className='select-icon'
                  />
                )}
              </View>
            ))}
          </View>
        </View>

        <View className='tip'>{tips}</View>
      </View>
    )
  }
}
